<template>
  <div class="index">
    <el-container>
      <!-- 头部 -->
      <el-header
        v-show="$route.name !== 'Index'"
        ref="header"
        style="height: 60px"
      >
        <span class="toggle" @click="toggle"><i :class="tgicon"></i></span>
        <span class="title">视频教学辅助平台</span>
        <close ref="close"></close>
      </el-header>

      <el-container>
        <div v-show="$route.name !== 'Index'" class="sidebar">
          <z-menu></z-menu>
        </div>
        <el-main :class="{ 'content-collapse': collapse }">
          <tags v-show="$route.name !== 'Index'" />

          <div
            class="content"
            :style="{ padding: $route.name == 'Index' ? '0' : '10px' }"
          >
            <transition name="move" mode="out-in">
              <keep-alive :include="keepLiveList">
                <router-view />
              </keep-alive>
            </transition>

            <!-- <el-backtop target=".content"></el-backtop> -->
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
import Close from "@/components/Close";
import zMenu from "@/components/zMenu";
import Tags from "@/components/Tags";
export default {
  name: "Controller",
  components: { Close, zMenu, Tags },
  data() {
    return {
      tgicon: "el-icon-s-fold",
    };
  },
  computed: {
    keepLiveList() {
      return this.$store.state.keepLiveList;
    },
    collapse() {
      return this.$store.state.collapse;
    },
  },

  mounted() {
    if (document.body.clientWidth > 1180) {
      this.$store.commit("hadndleCollapse", false);
    } else {
      this.$store.commit("hadndleCollapse", true);
    }

    window.onresize = () => {
      if (document.body.clientWidth < 1180) {
        this.$store.commit("hadndleCollapse", true);
      }
    };
  },
  methods: {
    toggle() {
      this.$store.commit("hadndleCollapse", !this.collapse);
      if (this.collapse) {
        this.tgicon = "el-icon-s-unfold";
      } else {
        this.tgicon = "el-icon-s-fold";
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.index {
  height: 100%;
}
.el-container {
  height: 100%;
}
.sidebar {
  display: block;
  height: 100%;
}
.el-header {
  color: white;
  background: #025050;
  text-align: center;
  position: relative;
  img {
    position: absolute;
    top: 0;
    left: 0;
    height: 60px;
  }
  span {
    font-size: 26px;
  }
  .toggle {
    position: absolute;
    top: 0;
    left: 20px;
    line-height: 60px;
  }
  .title {
    position: absolute;
    top: 0;
    left: 166px;
    line-height: 60px;
    font-size: 22px;
    transform: translateX(-50%);
  }
}

.el-main {
  padding: 0;
  background-color: #e9eef3;
  background: url("/static/images/bg.jpg") no-repeat;
  background-size: 100% 100%;
  color: #333;
  text-align: center;
  .content {
    width: auto;
    min-height: 85vh;
    box-sizing: border-box;
    color: white;
  }
  .imgqq {
    position: relative;
    top: 10%;
  }
}

body > .el-container {
  margin-bottom: 40px;
}
</style>
